<template>
  <div class="life-record-card card-item">
    <el-image :src="serviceFileRootPath + props.productItem?.imageUrl"
              :preview-src-list="[serviceFileRootPath + props.productItem?.imageUrl]"
              fit="contain" alt="暂无成果">
      <template #error>
        <div class="image-slot">
          <span>暂无图片</span>
        </div>
      </template>
    </el-image>

    <div class="record-info">
      <div class="top-container">
        <div class="info-list">
          <div class="info-item">
            <span class="title">{{ props.productItem.name }}</span>
          </div>

          <div class="info-item amount-item">
            <i class="fa-solid fa-coins"></i>
            {{ props.productItem.price }}
          </div>
        </div>

        <div class="button-info">
          <el-button type="primary" :icon="Edit" circle :size="'small'"
                     @click="editClick"/>
          <el-button type="danger" :icon="DeleteFilled" circle :size="'small'"
                     @click="deleteClick()" />
        </div>
      </div>

      <div class="bottom-container">
        <div class="info-list">
          <div class="info-item">
            <i class="fa-solid fa-clock" style="color: #6A5ACD"></i>
            {{ props.productItem.totalDay }}天
          </div>

          <div class="info-item">
            <i class="fa-solid fa-chart-line" style="color: #FFA500"></i>
            {{ props.productItem.averagePrice }}元/天
          </div>

          <div class="info-item">
            <i class="fa-solid fa-location-dot"></i>
            {{ props.productItem.channel }}
          </div>
        </div>
        <div class="info-list">
          <div class="info-item">
            <i class="fa-solid fa-flag"></i>
            {{ props.productItem.purchaser }}
          </div>
          <div class="info-item">
            <i class="fa-regular fa-calendar-check"></i>
            {{ props.productItem.purchaseDate }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Edit, DeleteFilled } from '@element-plus/icons-vue'
import { useProductStore } from '@/store/product.ts'
import { defineProps, onMounted, PropType } from 'vue'
import { commonElMessageBox } from 'vue3-common/utils/elUtil'
import { IProduct } from '@/types/product.ts'
import { useRouter } from 'vue-router'
import { serviceFileRootPath } from '@/utils'

const productStore = useProductStore()
const router = useRouter()

const props = defineProps({
  productItem: {
    required: true,
    type: Object as PropType<IProduct>
  }
})

onMounted(() => {

})

const editClick = async () => {
  const id = props.productItem?.id
  productStore.productApiType = 'UPDATE'

  productStore.currentProduct = props.productItem as IProduct
  await router.push({ name: 'ProductDetailId', params: { id } })
}

const deleteClick = () => {
  productStore.productApiType = 'DELETE'
  commonElMessageBox(`请确认是否删除该物品: ${props.productItem?.name}?`).then(() => {
    productStore.handleProductApi(props.productItem as IProduct)
  })
}
</script>

<style lang="scss">
@use "@/styles/home/life.record.module";
</style>
